Entradas resumidas con miniatura y paginación

Es costumbre que cualquier cambio que hago en el blog tiene su entrada correspondiente por dos razones, para recordar lo que hice y como lo hice y porque siempre hay alguien que adivina mi pensamiento y busca la entrada sobre esta o aquella cosa que le ha gustado.

Es lo que últimamente está ocurriendo con la pestaña Contenido en el menú que nadie encuentra las explicaciones porque no las hay y es raro el día que no indico el camino a casa de JMiur.

¿Qué vemos en esa pestaña de Contenido?

Se muestran  las entradas de el blog a modo de resumen y la primera imagen añadida en la entrada en miniatura,  no tuviera imagen mostraría la que añadiremos nosotros.

Si nos damos cuenta no digo que se muestre todas las entradas porque cada vez que usamos JSON nos encontramos limitados a mostrar 500 resultados, ese detalle y el tiempo que tardaría en ejecutarse son las dos grandes limitaciones a las que hace referencia JMiur, también nos explica como se consigue hacer funcionar una paginación para que esas entradas resumidas se vayan mostrando sin salir del sitio pero lo mejor de todo es que vamos a poder visualizar TODAS las entradas sin limitaciones ni problemas de carga.

Para no perder detalle  y si queremos comprender el funcionamiento de lo que viene a continuación recomiendo leer la entrada original incluidos los comentarios porque ya se sabe que los comentarios son una gran fuente de información y podemos encontrar soluciones a nuestras dudas.

Descargamos el siguiente archivo de texto y lo editamos con el bloc de notas de forma que donde dice:
var archivo = "http://gemablog-.blogspot.com/feeds/posts/default
(sustituimos http://gemablog-.blogspot.com por la url de nuestro blog)

var imgxdefecto = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPtQKtVwV3FRTPP9-I2iHwpIVrxv5iPxpVVzgeCWLNtWBfLvZJolh9zn-KDfkL9p1Eq0yJl7dM9Y-jvIpktF_ReKtNMWJUDdjie9jpNqPQPYIdZ8OvhCtSHMTCpVgknZiwVMX/s1600/nodisponible.jpg";  
(sustituimos la url de la imagen por la url de nuestra imagen que se mostrará cuando la entrada no contenga))

Una vez realizados esos cambios subimos el archivo al servidor que solemos utilizar por ejemplo Google Sites que como todos sabemos podemos utilizar accediendo con la misma cuenta y contraseña de Blogger. 

Como el resumen de entradas lo vamos a mostrar en una página estática editamos una nueva página en blanco y añadiremos todo lo necesario en su interior en este orden:

<!-- Aquí ponemos los estilos en primer lugar --> 

<!-- cargo el script --> 

<script src="URL_miscript.js"></script>

<!-- los divs contenedores -->

<!-- aquí se mostrarán los posts --> 

<div id="resultados"> </div>

<!-- elimino flotaciones -->

<div style="clear:both;"> </div>

<!-- aquí se mostrará la paginación --> 

<div id="paginacion"> </div>

<!-- aquí se mostrará el texto con los totales  --> 

<div id="totales"> </div> 

Lo primero de todo vemos que cargamos los estilos, tenemos la opción de utilizar los que nos proporciona JMiur que son los siguientes:

<style>
  #resultados { /* es el rectángulo del DIV donde se mostrarán */ }
  #loadingscript { /* es el texto de "cargando" */ }

  /* estas son las reglas de estilo para las entradas */
  .paginaposts { /* cada rectángulo */
    border: 1px solid #555;
    float: left;
    height: 35px;
    margin: 1px;
    padding: 5px;
    width: 197px;
  }
  .paginaposts a { /* los enlaces */
    color: #DDD;
    display: block;
    font-size: 11px;
    text-decoration: none;
  }
  .paginaposts img { /* la imagen miniatura */
    float: left;
    height: 36px;
    width: 36px;
  }
  .paginaposts h6 { /* el título de las entradas */
    float: right;
    height: 45px;
    margin: 0;
    width: 145px;
  }
  .paginaposts:hover { /* un efecto hover */
    background-image: -moz-linear-gradient(100% 100% 90deg, #338, #33F);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#338), to(#33F));
    filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#FF333388');
    border: 1px solid #33F;
  }

  /* estas son las reglas de estilo para la paginación inferior */
  #paginacion { /* el rectángulo contenedor */
    color: #BBB;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    height: 35px;
    line-height: 28px;
    padding: 20px 0;
    text-align: center;
  }
  #paginacion span, #paginacion a { /* cada número, texto o enlace */
    border: 1px solid #444;
    color: #BBB;
    display: inline-block;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    margin: 0 2px;
    padding: 0 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
  }
  #paginacion span.actual { /* resaltamos la página actual */
    color: #FFF;
    padding: 0 5px;
    -moz-box-shadow: 0 0 30px #DDD inset;
    -webkit-box-shadow: 0 0 30px #DDD inset;
    box-shadow: 0 0 30px #DDD inset;
  }
  #paginacion a:hover { /* efecto hover sobre los enlaces */
    color: #FFF;
    -moz-box-shadow: 0 0 20px #666 inset;
    -webkit-box-shadow: 0 0 20px #666 inset;
    box-shadow: 0 0 20px #666 inset;
  }
  #paginacion .antesdespues { border: none; }
  #paginacion .antesdespues:hover {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  #paginacion span.deshabilitado { /* los enlaces deshabilitados */
    border: none;
    color: #666;
  }

  /* la salida de la cantidad total */
  #totales {text-align:center;}
</style>

Si te gusta el color rojo estos son los estilos que estoy utilizando en este blog.

<style>
.post-body {height: 980px;}
  #resultados { 
width: 950px;}
  #loadingscript { /* es el texto de "cargando" */ }
.post-body br {display: none;}
  /* estas son las reglas de estilo para las entradas */
  .paginaposts { /* cada rectángulo */
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiBahCryd_cOmGg3PeXAsESHA7Q_VJA_k6w8Gn6xRkWO7CNetq-HHWVieU4mNfYYFgitCRwpruFoZVqBwqrpKYKV1MXKun_7CKmY4PHfyr0Yg_vfaA7eguk8fvU3UY2U6ByZpt/s0/fondocoments2.png) repeat scroll 0 0;
    border: 1px solid #555;
    float: left;
    height: 55px;
    margin: 1px;
    width: 197px;
  }
  .paginaposts a { /* los enlaces */
margin-top: 5px;
margin-left:5px;
text-shadow: 0 1px 0 #CDCDCD;
    color: #000000  !important;
    display: block;
    font-size: 11px  !important;
    text-decoration: none;
  }
  .paginaposts img { /* la imagen miniatura */
    float: left;
    height: 36px;
    width: 36px;
 
  }
  .paginaposts h6 { /* el título de las entradas */
    float: right;
    height: 45px;
    margin: 0;
    width: 145px;

  }
  .paginaposts:hover { /* un efecto hover */
    background-image: -moz-linear-gradient(100% 100% 90deg, #ccc, #FFF);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#ccc), to(#FFF));
    filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#ccc');
    border: 1px solid #333;
  }

  /* estas son las reglas de estilo para la paginación inferior */
  #paginacion { /* el rectángulo contenedor */
    color: #333;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    height: 35px;
    line-height: 28px;
    padding: 20px 0;
    text-align: center;
  }
  #paginacion span, #paginacion a { /* cada número, texto o enlace */
    border: 1px solid #ccc;
    color: #990000;
    display: inline-block;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    margin: 0 2px;
    padding: 0 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
  }
  #paginacion span.actual { /* resaltamos la página actual */
    color: #000;
    padding: 0 5px;
    -moz-box-shadow: 0 0 30px #DDD inset;
    -webkit-box-shadow: 0 0 30px #DDD inset;
    box-shadow: 0 0 30px #DDD inset;
  }
  #paginacion a:hover { /* efecto hover sobre los enlaces */
    color: #990000;
    -moz-box-shadow: 0 0 20px #666 inset;
    -webkit-box-shadow: 0 0 20px #666 inset;
    box-shadow: 0 0 20px #666 inset;
  }
  #paginacion .antesdespues { border: none; }
  #paginacion .antesdespues:hover {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  #paginacion span.deshabilitado { /* los enlaces deshabilitados */
    border: none;
    color: #000;
  }

  /* la salida de la cantidad total */
  #totales {text-align:center;}
</style>

El siguiente paso es sustituir en la línea del script donde dice URL_miscript.js por la url de archivo que subimos a nuestro servidor. El resto lo añadimos tal y como está indicado sin modificar nada.

Los agradecimientos para Vagabundia,  y ya puestos las quejas también